<template>
  <div>
    <!-- 顶部搜索 -->
    <div class="navbar">
      <NavSerach :bgc="color" />
    </div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
      v-for="item in swiperList"
      :key="item.id"
      >
      <img :src="`http://liufusong.top:8080${item.imgSrc}`" />
      </van-swipe-item>
    </van-swipe>
    <!-- 中间导航栏 -->
    <van-grid>
      <van-grid-item  text="整租" @click="changeFn">
        <div slot=icon class="grid-icon">
        <van-icon color="#1cb676" name="wap-home-o" />
        </div>
      </van-grid-item>
      <van-grid-item text="合租"  @click="changeFn">
        <div slot=icon  class="grid-icon">
        <van-icon color="#1cb676" name="friends-o" />
        </div>
      </van-grid-item>
      <van-grid-item text="地图找房"  @click="$router.push('/maphouse')">
        <div slot=icon class="grid-icon">
        <van-icon color="#1cb676" name="location-o" />
        </div>
      </van-grid-item >
      <van-grid-item  text="去出租" @click="$router.push('/rentadd')">
        <div slot=icon class="grid-icon">
        <van-icon color="#1cb676" name="shop-o" />
        </div>
      </van-grid-item>
    </van-grid>
    <!-- 租房小组 -->
  <div class="main">
    <van-cell-group>
       <van-cell title="租房小组" value="更多" /><!-- #value -->
    </van-cell-group>
    <CardCell />

  </div>
  </div>
</template>

<script>
// 获取轮播图
import { getSwiperApi } from '@/api'
import NavSerach from '@/components/NavSearch.vue'
import CardCell from '@/views/Second/Home/Card.vue'
export default {
  data () {
    return {
      swiperList: [],
      color: 'transparent'
    }
  },
  components: {
    NavSerach,
    CardCell
  },
  async created () {
    const res = await getSwiperApi()
    // console.log(res.data.body)
    this.swiperList = res.data.body
  },
  methods: {
    changeFn () {
      this.$router.push('house')
    }
  }
}
</script>

<style lang="less" scoped>
.navbar {
  position: fixed;
  top: 30px;
  left: 25px;
  z-index: 999;
}
.my-swipe .van-swipe-item img {
  width: 100%;
}
.grid-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  border-radius: 50%;
  font-size: 35px;
  text-align: center;
  line-height: 50px;
  background-color: #c2ecda;
}
//z租房小组
.main {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  background-color: #f2f2f2; //transparent
 /deep/.van-cell-group,.van-cell {
    background-color: transparent;
  }
}
</style>
